<!-- extends表明此页面继承自 base.html 文件 -->
{% extends 'base.html' %}
{% load staticfiles %}
<!-- 写入 base.html 中定义的 title -->
{% block title %}
    首页
{% endblock title %}
<!-- 写入 base.html 中定义的 content -->
{% block content %}
    <!-- 定义放置文章标题的div容器 -->
    <div class="container">
        <!-- 排序 -->
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item">
                    <a href="{% url 'article:article_list' %}?search={{ search }}&column={{ column }}&tag={{ tag }}">
                        最新
                    </a>
                </li>
                <li class="breadcrumb-item">
                    <a href="{% url 'article:article_list' %}?order=total_views&search={{ search }}&column={{ column }}&tag={{ tag }}">
                        最热
                    </a>
                </li>
            </ol>
        </nav>
        <!-- 搜索栏 -->
        <div class="row">
            <div class="col-auto mr-auto">
                <form action="" class="form-inline">
                    <label class="sr-only">content</label>
                    <label>
                        <input type="text" class="form-control mb-2 mr-sm-2"
                               name="search" placeholder="搜索文章..." required>
                    </label>
                </form>
            </div>
        </div>
        <!-- 搜索提示语 -->
        {% if search %}
            {% if articles %}
                <h4><span style="color: red">"{{ search }}"</span>的搜索结果如下：</h4>
                <hr>
            {% else %}
                <h4>暂无<span style="color: red">"{{ search }}"</span>有关的文章。</h4>
                <hr>
            {% endif %}
        {% endif %}
        <!-- 列表循环 -->
        <div class="row mt-2">
            {% for article in articles %}
                <!-- 文章内容 -->

                <!-- 文章标题图 -->
                {% if article.avatar %}
                    <div class="col-3">
                        <img src="{{ article.avatar.url }}" alt="avatar"
                             style="width: 100%; height: 100%; border-radius: 20px">
                    </div>
                {% endif %}

                <div class="col">
                    <!-- 栏目 -->
                    {% if article.column %}
                        <a role="button"
                           href="{% url 'article:article_list' %}?column={{ article.column.id }}"
                           class="btn btn-sm mb-2
                        {% if article.column.title == 'Django' %}
                            btn-success
                        {% elif article.column.title == 'vue' %}
                            btn-danger
                        {% elif article.column.title == 'Python' %}
                            btn-warning
                        {% elif article.column.title == 'life' %}
                            btn-info
                        {% endif %}">
                            {{ article.column }}
                        </a>
                    {% endif %}
                    <!-- 标签 -->
                    <span>
                    {% for tag in article.tags.all %}
                        <a href="{% url 'article:article_list' %}?tag={{ tag }}"
                           class="badge badge-secondary">{{ tag }}</a>
                    {% endfor %}
                    </span>
                    <!-- 标题 -->
                    <h4>
                        <b>
                            <a href="{% url 'article:article_detail' article.id %}"
                               style="color: black;">
                                {{ article.title }}
                            </a>
                        </b>
                    </h4>
                    <!-- 摘要 -->
                    <div>
                        <p style="color: gray;">
                            {{ article.body|slice:'100' }}...
                        </p>
                    </div>
                    <!-- 注脚 -->
                    <p>
                        <!-- 附加信息 -->
                        <span style="color: green;">
                            <i class="fas fa-eye" style="color: lightskyblue;"></i>
                            {{ article.total_views }} &nbsp;&nbsp;&nbsp;
                        </span>
                        <span>
                            <i class="fas fa-comments" style="color: yellowgreen;"></i>
                            {{ article.comment.count }} &nbsp;&nbsp;&nbsp;
                        </span>
                        <span style="color: blue;">
                            <i class="fas fa-clock" style="color: pink;"></i>
                            {{ article.created|date:'Y-m-d' }} &nbsp;&nbsp;&nbsp;
                        </span>
                    </p>
                    {#<hr>#}
                </div>
                <hr style="width: 100%;"/>
            {% endfor %}
            {#卡片类型#}
            {#            {% for article in articles %}#}
            {#                <!-- 文章内容 -->#}
            {#                <div class="col-4 mb-4">#}
            {#                    <!-- 卡片容器 -->#}
            {#                    <div class="card h-100">#}
            {#                        <!-- 标题 -->#}
            {#                        <h4 class="card-header">{{ article.title }}</h4>#}
            {#                        <!-- 摘要 -->#}
            {#                        <div class="card-body">#}
            {#                            <p class="card-text">#}
            {#                                {{ article.body|slice:'100' }}...#}
            {#                            </p>#}
            {#                        </div>#}
            {#                        <!-- 注脚 -->#}
            {#                        <div class="card-footer">#}
            {# 阅读本文 进入文章详情 #}
            {#                            <a href="{% url 'article:article_detail' article.id %}" class="btn btn-primary">阅读文本</a>#}
            {# 浏览量 #}
            {#                            <span>#}
            {#                                <small class="col align-self-end" style="color: gray;">#}
            {#                                       浏览数：{{ article.total_views }}#}
            {#                                </small>#}
            {#                            </span>#}
            {#                        </div>#}
            {#                    </div>#}
            {#                </div>#}
            {#            {% endfor %}#}
        </div>
        <!-- 页码导航 -->
        <div class="pagination row">
            <div class="m-auto">
            <span class="step-links">
                <!-- 如果不是第一页，则显示上翻按钮 -->
                {% if articles.has_previous %}
                    <a href="?page=1&order={{ order }}&search={{ search }}&column={{ column }}&tag={{ tag }}"
                       class="btn btn-success">&laquo;1</a>
                    <span>...</span>
                    <a href="?page={{ articles.previous_page_number }}&order={{ order }}&search={{ search }}&column={{ column }}&tag={{ tag }}"
                       class="btn btn-secondary">{{ articles.previous_page_number }}</a>
                {% endif %}
                <!-- 当前页面 -->
                <span class="current btn btn-danger btn-lg">{{ articles.number }}</span>
                <!-- 如果不是最末页，则显示下翻按钮 -->
                {% if articles.has_next %}
                    <a href="?page={{ articles.next_page_number }}&order={{ order }}&search={{ search }}&column={{ column }}&tag={{ tag }}"
                       class="btn btn-secondary">{{ articles.next_page_number }}</a>
                    <span>...</span>
                    <a href="?page={{ articles.paginator.num_pages }}&order={{ order }}&search={{ search }}&column={{ column }}&tag={{ tag }}"
                       class="btn btn-success">{{ articles.paginator.num_pages }} &raquo;
                    </a>
                {% endif %}
            </span>
            </div>
        </div>
    </div>
{% endblock content %}